<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <link type="text/css" rel="stylesheet" href="css/public.css"/>
</head>
<body>
<div id="app">
    <!--头部-->
    <header class="publicHeader">
        <h1>超市订单管理系统</h1>
        <div class="publicHeaderR">
            <p><span>下午好！</span><span style="color: #fff21b"> 系统管理员</span> , 欢迎你！</p>
            <a href="jsp/logout.do">退出</a>
        </div>
    </header>
    <!--时间-->
    <section class="publicTime">
        <span id="time">2015年1月1日 11:11  星期一</span>
        <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
    <!--主体内容-->
    <section class="publicMian ">
        <div class="left">
            <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
            <nav>
                <ul class="list">
                    <li><a href="jsp/bill.do?method=query">订单管理</a></li>
                    <li><a href="jsp/provider.do?method=query">供应商管理</a></li>
                    <li><a href="jsp/user.do?method=query">用户管理</a></li>
                    <li><a href="jsp/pwdmodify.jsp">密码修改</a></li>
                    <li><a href="jsp/logout.do">退出系统</a></li>
                </ul>
            </nav>
        </div>
        <input type="hidden" id="path" name="path" value="/SMBMS"/>
        <input type="hidden" id="referer" name="referer" value="http://localhost:8080jsp/user.do?method=query"/>

        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面 >> 用户添加页面</span>
            </div>
            <div class="providerAdd">
                <!--div的class 为error是验证错误，ok是验证成功-->
                <div>
                    <label for="userCode">用户编码：</label>
                    <input type="text" v-model="userForm.userCode" @blur="checkUnique('userCode',userForm.userCode)"
                           id="userCode">
                    <!-- 放置提示信息 -->
                    <font color="red">{{errorCode}}</font>
                </div>
                <div>
                    <label for="userName">用户名称：</label>
                    <input type="text" v-model="userForm.userName" @blur="checkUnique('userName',userForm.userName)"
                           id="userName">
                    <font color="red">{{errorName}}</font>
                </div>
                <div>
                    <label for="userPassword">用户密码：</label>
                    <input type="password" v-model="userForm.userPassword" id="userPassword">
                    <font color="red">{{errorPassword}}</font>
                </div>
                <div>
                    <label for="ruserPassword1">确认密码：</label>
                    <input type="password" @focusout="checkPassword" v-model="userForm.ruserPassword"
                           id="ruserPassword1">
                    <font color="red">{{errorPassword}}</font>
                </div>
                <div>
                    <label>用户性别：</label>
                    <input type="radio" name="gender" v-model="userForm.gender" :value="1"/>女
                    <input type="radio" name="gender" v-model="userForm.gender" :value="2"/>男
                </div>
                <div>
                    <label for="birthday">出生日期：</label>
                    <input type="date" v-model="userForm.birthday" id="birthday">
                    <font color="red"></font>
                </div>
                <div>
                    <label for="phone">用户电话：</label>
                    <input type="text" v-model="userForm.phone" id="phone">
                    <font color="red"></font>
                </div>
                <div>
                    <label for="address">用户地址：</label>
                    <input id="address" v-model="userForm.address">
                </div>
                <div>
                    <label>用户角色：</label>
                    <!-- 列出所有的角色分类 -->
                    <select id="userRole" v-model="userForm.userRole">
                        <option :value="r.id" v-for="r in roles">{{r.roleName}}</option>
                    </select>
                    <font color="red"></font>
                </div>
                <div class="providerAddBtn">
                    <input type="button" name="add" id="add" value="保存" @click="saveUser">
                    <input type="button" id="back" name="back" value="返回" @click="backUser">
                </div>
            </div>
        </div>
    </section>


    <footer class="footer">
        版权归关老师
    </footer>
</div>
<script type="text/javascript" src="js/time.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="calendar/WdatePicker.js"></script>
</body>
</html>

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                userForm: {
                    userName: '',
                    userCode: '',
                    userPassword: '',
                    ruserPassword: '',
                    birthday: '',
                    gender: 2,
                    address: '',
                    userRole: 3,
                    phone: ''
                },
                roles: [],
                errorPassword: '',   // 密码错误信息
                errorCode: '',
                errorName: '',
                flagPassword: false,  // 标识密码是否正确
                flagCode: false,
                flagName: false
            }
        },
        methods: {
            saveUser() {
                if (this.flagPassword === false || this.flagName === false || this.flagCode === false) {
                    return;
                }
                let data = new URLSearchParams()
                data.append('userCode', this.userForm.userCode)
                data.append('userName', this.userForm.userName)
                data.append('userPassword', this.userForm.userPassword)
                data.append('birthday', this.userForm.birthday)
                data.append('phone', this.userForm.phone)
                data.append('address', this.userForm.address)
                data.append('userRole', this.userForm.userRole)
                data.append('gender', this.userForm.gender)
                axios({
                    method: 'post',
                    url: 'user_save',
                    data: data
                }).then(response => {
                    if (response.status === 200) {
                        location.href = 'user.html'
                    }
                })
            },
            loadRoleData() {
                axios.get('role_find')
                    .then(response => {
                        this.roles = response.data
                    })
            },
            backUser() {
                location.href = 'user.html'
            },
            checkPassword() {
                // \d ：数字
                let regex = /^\d{6,10}$/;
                var result = regex.test(this.userForm.userPassword);
                if (!result) {
                    this.flagPassword = false
                    this.errorPassword = '密码只能是6-10位数字'
                    return;
                } else {
                    this.flagPassword = true
                    this.errorPassword = ''
                }

                if (this.userForm.userPassword === this.userForm.ruserPassword) {
                    this.flagPassword = true
                    this.errorPassword = ''
                } else {
                    this.flagPassword = false
                    this.errorPassword = '两次密码不一致'
                }
            },
            checkUnique(field, value) {
                axios.get('user_check_exist', {
                    params: {
                        field: field,
                        value: value
                    }
                }).then(response => {
                    console.log(response.data)
                    if (response.data) {
                        if (field === 'userCode') {
                            this.errorCode = ''
                            this.flagCode = true
                        } else {
                            this.errorName = ''
                            this.flagName = true
                        }
                    } else {
                        if (field === 'userCode') {
                            this.errorCode = '名称已被占用'
                            this.flagCode = false
                        } else {
                            this.errorName = '名称已被占用'
                            this.flagName = false
                        }
                    }
                })
            }
        },
        created() {
            this.loadRoleData()
        }
    })
</script>

